<template>
  <div class="term"></div>
</template>
<style>
  .terminal {
    border: #000 solid 5px;
    font-family: "Monaco", "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: 11px;
    color: #f0f0f0;
    background: #000;
    width: 1200px;
    box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
  }
</style>
<script>
  export default {
    name: "term",
    data() {
      return {
        id: '',
        client:null,
        term:null,
      }
    },
    created() {
      this.$nextTick(function () {
        let me = this
        initTemrs(this.$route.params)
        if (me.term == null){
          this.term.close()
        }
        if (me.client == null){
          this.client.closeClient()
        }
        function initTemrs(options) {
          me.client = new WSSHClient();
          me.term = new Terminal({cols: 160, rows: 48, screenKeys: true});
          me.term.on('data', function (data) {
            me.client.sendClientData(data);
          });
          me.term.open($('.term').get(0));
          me.term.write('Connecting...');
          me.client.connect({
            onError: function (error) {
              me.term.write('Error: ' + error + '\r\n');
              console.debug('error happened');
            },
            onConnect: function () {
              console.log(options)
              me.client.sendInitData(options);
              me.client.sendClientData('\r');
              console.debug('connection established');
            },
            onClose: function () {
              me.term.write("\rconnection closed")
              console.debug('connection reset by peer');
            },
            onData: function (data) {
              me.term.write(data);
              console.debug('get data:' + data);
            }
          })
        }
      });
    },
    destroyed:function () {
        this.client.closeClient()
        this.term.close()
    }
  }
</script>

<style scoped>

</style>
